<template>
	<scroll-view class="full box relative list-com-wrap" scroll-y>
		<article-list :list="list" />
		<view class="empty-wrapper" v-if="isEmpty">
			<u-empty text="暂无数据" :icon="sourceUrl + '/list-empty.png'" />
		</view>
		<view class="loadmore-wrapper" v-if="showLoading">
			<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
		</view>
	</scroll-view>
</template>

<script>
	import ArticleList from './article-list.vue'
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		components: { ArticleList },
		props: {
			cityId: {
				type: [Number, String]
			},
			areaId: {
				type: [Number, String]
			},
			type: {
				type: Number,
			},
			auto: {
				type: Boolean,
				default: () => false
			}
		},
		mounted() {

			if (this.auto) {
				this.initData()
			}
		},
		methods: {
			patchList(list) {
				return list.map(item => {

				})
			},
			async initData(clear = false, cb) {
				console.log(this.cityId, 'cityId');
				if (clear) {
					this.status = LOAD_MORE.LOADING
					this.page = 1
					this.list = []
					this.isEmpty = false
					this.showLoading = false
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, type, areaId } = this
				const resp = await this.$request({
					url: '/article/lists',
					method: 'GET',
					data: { cid: type, page, city_id: this.cityId, area: areaId },
				})
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.LOAD_MORE
					cb && cb(false)
					return this.$toast({ title: msg })
				}
				const { lists, count, page_size, page_no } = data
				if (!!lists && lists.length) {
					this.list.push(...lists.map(item => {
						item.type *= 1
						return item
					}))
				}
				this.isEmpty = this.list.length === 0
				if (!this.hasInit) {
					this.hasInit = true
				}
				if (!this.showLoading) {
					this.showLoading = true
				}
				cb && cb(true)
				const hasMore = page_no * page_size < count
				if (hasMore) {
					this.page += 1
					this.status = LOAD_MORE.LOAD_MORE
					return
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		data() {
			return {
				list: [],
				isEmpty: false,
				page: 1,
				status: LOAD_MORE.LOAD_MORE,
				hasInit: false,
				showLoading: true,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-com-wrap {
		padding: 0 32rpx;

		.record-list {}


	}
</style>